body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
    background-color: rgb(238, 238, 238);
    
}

.item {
    display: grid;
    grid-template-columns: 200px 1fr 0.8fr auto;
    /* height: 200px; */
    /* margin: 0px 20px 0px 0px; */
    padding-bottom: 40px;
    padding-top: 10px;
    border-bottom: 2px solid rgb(227, 227, 227);


}


.container {
    flex: 1;
    border-radius: 10px;
    min-height: 370px;
}

main {
    display: flex;
    /* justify-content: space-between; */
    gap: 10px;
    align-items: flex-start;

}

.rightbox {
    text-align: right;
    padding-right: 35px;
    padding-top: 20px;
    font-weight: bold;
    color: #B12704;

  
}
 .middlebox{
    display: flex;
        flex-direction: column;
        padding: 10px;
        gap: 10px;
        /* justify-content: space-evenly; */
 }
 .leftbox{
    display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
 }
@media(max-width:1220px) {
    main {
        flex-direction: column-reverse;
        align-items: center;
    }
    #price-text{
        display: none;
    }
    .container {
        width: 60%;
        min-width: 300px;
      
      
    }

   

    .item {
        grid-template-columns: 70% 30%;
        grid-template-rows: 200px auto 190px;
        grid-template-areas:
            "img img "
            "left left"
            "middle right";
        height: auto;
        /* border: 1px solid rgb(180, 180, 180); */
        margin:5px;
        margin-top: 30px;
        padding-bottom:30px;
        border-bottom: 2px solid rgb(211, 211, 211);
        
    }

    #image {
        grid-area: img;
    }

    .leftbox {
        grid-area: left;
        gap: 5px;
       
     
    }

    .middlebox {
        grid-area: middle;
        border-radius: 0 0 0 11px;
        gap: 0px;
        border-top: 2px solid rgb(247, 247, 247);

    }

    .rightbox {
        grid-area: right;
        
    }
    #image img {
        max-height: 100%;
        /* max-width: 70%; */
        /* max-height: 70%; */

    }
 
}

label {
    padding: 5px;
}

input[type="radio"] {
    transform: scale(1.5);
    accent-color: rgb(8, 113, 166);
    margin-right: 8px;
}

.p {
    padding: 5px 0px;
    width: 100%;
}


#image {
    display: flex;
    justify-content: center;
    align-items: center;

}

#image img {
    
    max-width: 90%;
    max-height: 70%;
    /* max-width: 100px; */
    margin-left:20px ;


} 
#header-cart{
    position: relative;
    padding: 20px 20px 10px 20px;
}
.shoppingCart-text {
    font-size: xx-large;
    color: #3d3d3d;

    display: block;
    flex-basis: 100%;
    margin: 0px;
    margin-bottom: 5px;
}
#price-text{
    position:absolute;
    top: 60%;
    right: 40px;
}
hr {
    border-top: 1px solid rgb(220, 220, 220);
}
.pro-name{
    font-weight: 600;
}
.update{
    margin-left: 10px;
    border-left: 2px solid rgb(191, 191, 191);
    padding:0 10px;
}

.pro-arrival{
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight:bolder; color:#007600;

}

label {
    display: flex;
}
.deliverDate{
    color: #007600;
    font-weight: bolder;
}
.deliveryDate-Price{
    margin-left: 5px;
}
.deliveryPrice{
    font-size: 15px;
    color: rgb(135, 132, 132);
    margin-top: 4px;
}



.update-delete{
    display: flex;
    cursor: pointer;
    color: rgb(95, 95, 172);
}

input[type="number"]{
    visibility:hidden;
}
/* .update-{
    
} */
/* input[type="number"]{
    visibility: visible;
} */